<template>
  <div class="bg-gray-100 p-5 all">
    <div class="dsName">{{ dsName }}</div>
    <el-tabs v-model="activeTab" type="card">

      <el-tab-pane label="JSON 编辑" name="json-edit">
        <JsonEdit @setName="setName"></JsonEdit>
      </el-tab-pane>

      <el-tab-pane label="数据源" name="data-source">
        <div class="mb-5">
          <div>数据源</div>
          <textarea v-model="origin" class="w-full h-72 p-2 border border-gray-300 rounded mb-2"
            placeholder="Enter text here..."></textarea>
          <div>表头</div>
          <textarea v-model="header" class="w-full h-40 p-2 border border-gray-300 rounded mb-2"
            placeholder="Enter more text here..."></textarea>

          <div class="flex gap-4">
            <button @click="onInit(false)" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
              使用\n\n分割
            </button>
            <button @click="onInit(true)" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
              使用空字符分割
            </button>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="拖拽组件" name="drag-and-drop">
        <DragAndDrop :parents="parents" :sons="sons" v-if="isInit" @addItem="addItem" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import DragAndDrop from './comm/DragAndDrop.vue'; // Adjust the path as necessary
import JsonEdit from './comm/JsonEdit.vue';
import { ElTabs, ElTabPane } from 'element-plus'; // 引入 Element Plus 的 Tab 组件

const parents = ref([]);
const sons = ref([]);
const dsName = ref("未定义")

const origin = ref(localStorage.getItem("origin") || "")
const header = ref(localStorage.getItem("header") || "")
const isInit = ref(false)
const activeTab = ref('data-source'); // 默认选中的 Tab

const setName = (val) => {
  dsName.value = val;
}

const onInit = (isSpace) => {
  localStorage.setItem("origin", origin.value)
  localStorage.setItem("header", header.value)
  parents.value = isSpace ? getSpaceList(header.value) : getEnterList(header.value)
  sons.value = JSON.parse(origin.value)
  isInit.value = false;
  setTimeout(() => isInit.value = true, 30)
  activeTab.value = "drag-and-drop"
}

const getSpaceList = (inputString) => {
  const ary = inputString.split(/\s+/).filter(item => item.trim() !== '');
  console.log(ary)
  return ary.map(i => {
    return { label: i.trim() }
  })
}

const getEnterList = (inputString) => {
  return inputString.split("\\n\\n").map(header => {
    return { label: header.trim() }
  });
}

const addItem = (val) => {
  console.log("val", val)
  header.value.push(val)
}
</script>

<style scoped>
.dsName {
  position: fixed;
  right: 20px;
  top: 20px;
  font-size: 14px;
  color: #000;
}

.box {
  width: 100px;
  height: 100px;
  border: 2px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.item {
  width: 50px;
  height: 50px;
  background-color: #000;
  margin: 0 5px;
  cursor: move;
}
</style>
